<!--/* eslint-disable vue/valid-v-else, vue/no-unused-vars, vue/valid-v-for */-->
<template>
  <div class="app-container scenic-page">
    <!-- 顶部标题和搜索栏 -->
    <div class="header-section">
      <div class="title-container">
        <h1 class="page-title">乡村景点推荐</h1>
        <p class="page-subtitle">探索美丽乡村，体验自然风光</p>
      </div>
      <div class="search-section">
        <el-input
            v-model="searchQuery"
            placeholder="搜索景点名称或地址..."
            class="search-input"
            clearable
        >
          <template #prefix>
            <i class="el-icon-search"></i>
          </template>
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchScenic">搜索</el-button>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="view-toggle">
        <el-radio-group v-model="viewMode" size="medium">
          <el-radio-button label="list">
            <i class="el-icon-menu"></i> 列表视图
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 景点列表区域 -->
    <div class="scenic-list" v-if="viewMode === 'list'">
      <div class="scenic-cards">
        <el-card
            v-for="scenic in filteredScenics"
            :key="scenic.id"
            class="scenic-card"
            shadow="hover"
        >
          <div class="card-content">
            <div class="scenic-image">
              <!-- 使用image-preview组件展示图片，使用在线占位图 -->
              <image-preview
                  :src="getMainImage(scenic.imageUrl)"
                  :width="300"
                  :height="200"
                  @click="viewImageDetail(scenic.imageUrl)"
                  :error-src="'https://picsum.photos/300/200?random=scenic-'+scenic.id"
              />
            </div>
            <div class="scenic-info">
              <h3 class="scenic-name">{{ scenic.name }}</h3>
              <div class="scenic-location">
                <i class="el-icon-location"></i>
                <span>{{ scenic.address }}</span>
              </div>
              <p class="scenic-intro">{{ scenic.intro || '暂无简介' }}</p>
              <div class="scenic-actions">
                <el-button type="primary" size="small" @click="viewDetail(scenic.id)">
                  查看详情
                </el-button>
                <el-button type="text" icon="el-icon-share">分享</el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>



    <!-- 分页控件 -->
    <div class="pagination-section">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="scenics.length"
          @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { listArea } from "@/api/system/area";
import imagePreview from "@/components/ImagePreview"; // 引入图片预览组件

export default {
  name: "ScenicRecommendation",
  components: {
    imagePreview
  },
  data() {
    return {
      scenics: [], // 所有景点数据
      filteredScenics: [], // 过滤后的景点数据
      searchQuery: "",
      viewMode: "list", // 视图模式: list
      pageSize: 8,
      currentPage: 1,
      // 图片服务器地址，优先使用环境变量，开发环境默认留空(同源访问)
      baseUrl: process.env.VUE_APP_IMAGE_SERVER || ""
    };
  },
  mounted() {
    this.fetchScenicData();
  },
  methods: {
    // 获取景点数据
    async fetchScenicData() {
      try {
        const response = await listArea();
        this.scenics = response.rows;
        this.updateFilteredScenics();
      } catch (error) {
        console.error("获取景点数据失败:", error);
        this.$message.error("获取景点数据失败");
      }
    },

    // 搜索景点
    searchScenic() {
      this.updateFilteredScenics();
    },

    // 统一更新过滤后数据
    updateFilteredScenics() {
      if (!this.searchQuery) {
        this.filteredScenics = this.scenics.slice(0, this.pageSize);
        return;
      }

      const query = this.searchQuery.toLowerCase();
      this.filteredScenics = this.scenics.filter(scenic =>
          Scenic.name.toLowerCase().includes(query) ||
          Scenic.address.toLowerCase().includes(query)
      ).slice(0, this.pageSize);
    },

    // 图片处理方法（与活动页面统一）
    getMainImage(imageUrls) {
      if (!imageUrls) return null;

      // 处理逗号分隔的多图，取第一张有效图片
      const urlArray = imageUrls
          .split(',')
          .map(url => url.trim())
          .filter(url => url && url.startsWith('/'));

      if (urlArray.length === 0) return null;

      // 动态适配开发/生产环境
      return this.getImageUrl(urlArray[0]);
    },

    // 统一图片URL处理（开发/生产环境适配）
    getImageUrl(url) {
      if (process.env.NODE_ENV === 'development') {
        return `${this.baseUrl}${url}`;
      } else {
        // 开发环境默认使用85端口（可根据实际情况调整）
        return `http://localhost:8085/dev-api${url}`;
      }
    },

    // 查看图片详情
    viewImageDetail(url) {
      if (url) {
        const imageUrl = this.getImageUrl(url);
        this.$refs.imagePreview.showLargeImage(imageUrl);
      }
    },

    // 查看详情
    viewDetail(id) {
      this.$router.push({ path: `/scenicdetail/${id}` });
    },

    // 分页变化
    handlePageChange(page) {
      this.currentPage = page;
      this.updateFilteredScenics();
    }
  }
};
</script>

<style lang="scss" scoped>
/* 移除未使用的标签样式，与活动页面保持一致 */
.scenic-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  .header-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(to right, #f8f9fa, #e9ecef);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .title-container {
      .page-title {
        font-size: 28px;
        color: #2c3e50;
        margin-bottom: 8px;
      }

      .page-subtitle {
        font-size: 16px;
        color: #7f8c8d;
        margin: 0;
      }
    }

    .search-section {
      display: flex;
      width: 100%;
      max-width: 500px;
      margin-top: 15px;

      .search-input {
        flex: 1;
        margin-right: 10px;
      }
    }
  }

  .filter-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 25px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
  }

  .scenic-list {
    .scenic-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;

      .scenic-card {
        transition: all 0.3s ease;
        border-radius: 12px;
        overflow: hidden;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .card-content {
          display: flex;
          flex-direction: column;
          height: 100%;

          .scenic-image {
            height: 200px;
            overflow: hidden;
            position: relative;
          }

          .scenic-info {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;

            .scenic-name {
              margin: 0 0 10px;
              font-size: 18px;
              color: #2c3e50;
            }

            .scenic-location {
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              color: #7f8c8d;
              font-size: 14px;

              i {
                margin-right: 5px;
              }
            }

            .scenic-intro {
              flex: 1;
              color: #555;
              font-size: 14px;
              line-height: 1.6;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
              margin-bottom: 15px;
            }

            .scenic-actions {
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
}
</style>
